<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt" xmlns:c="">
<head>
    <meta charset="UTF-8">
    <title>PetStore Management</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <!--导入jquery-ui-->
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link type="text/css" href="../js/jquery-ui.min.css" rel="stylesheet">
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #Content {
        width: 100%;
        height: 110ex;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    a{
        display: block;
        text-decoration: none;
        color: #eaac00;
        font-weight: bold;
    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 1ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
    table{
        display: block;
        /*position: absolute;*/
        /*top: 10ex;*/
        /*left: 10ex;*/
        margin-top: 10%;
        margin-left: 32%;
        width: 45ex;
        font-size: 3ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
    }
    table tr{
        height: 4ex;
        text-align: left;
    }
    table td{
        width: 10ex;
    }
    #search {
        width: 40%;
        height: 7ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 0.7ex;
        border-style: solid;
        text-align: center;
        color: #eaac00;
        position: absolute;
        display: inline-block;
        top: 1ex;
        left: 57ex;
    }

    #search input {
        float: left;
        position: absolute;
        border-width: .1ex .1ex .1ex .1ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        color: #eaac00;
        height: 3ex;
        font-size:3ex;
    }
    input{
        border-width: .2ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        color: #eaac00;
        height: 3ex;
    }
    #search span{
        display: inline-block;
        float: left;
        position: absolute;
        font-size: 3ex;
    }
    h2{

        float: left;
        position: absolute;
        top: 5ex;
        left: 33ex;
        font-size: 5ex;
    }
    /*.RETURN{*/
    /*    display: inline-block;*/
    /*    float: left;*/
    /*    margin-left: 1ex;*/
    /*    margin-top: 3ex;*/
    /*    margin-bottom: 3ex;*/
    /*    width: 10ex;*/
    /*    background-image: url("../image/RETURN2.png");*/
    /*    background-size: 100%;*/
    /*    background-repeat: no-repeat;*/
    /*    border-color: #eaac00;*/
    /*    border-width: 0.4ex;*/
    /*    border-style: solid;*/
    /*}*/
    #edit{
        position: absolute;
        display:inline-block;
        background-image: url("../image/EDIT.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        height: 5ex;
        top: 110ex;
        left: 75ex;
    }
    #save{
        position: absolute;
        display:inline-block;
        background-image: url("../image/SAVE.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        top: 110ex;
        left: 103ex;
        height: 5ex;
    }
    #return{
        position: absolute;
        display:inline-block;
        background-image: url("../image/RETURN.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 15ex;
        top: 110ex;
        left: 129ex;
        height: 5ex;
    }
</style>
<body>
<div th:replace="manageCommon/managetop"></div>
</div>

<div id="Content">
    <a class="Returnto" href="/manage/main"></a>
    <div id="search">
        <div id="searchContent">
            <!--搜索-->
            <form action="" method="post" id="keyForm">
                <!--右侧搜索选择复选框-->
                <span style="left: 1ex;top: 1ex ">category:</span>
                <input style="left: 9.5ex;top: 0.8ex;width: 2ex" type="radio" name="select" id="category"/>
                <span style="left: 13ex;top: 1ex">product:</span>
                <input style="left: 20ex;top: 0.9ex;width: 2.1ex" type="radio" name="select" id="product"/>
                <!--开启自动补全功能autocomplete="on"-->
                <input  style="left: 25ex;top: 0.6ex;width: 18ex"id="searchText" type="text" name="keyword" size="14" />
                <input style="left: 44ex;top: 1ex;width: 7ex" type="button" name="searchProducts" value="Search" id="searchSubmit"/>
            </form>
        </div>
    </div>
    <!--    category选择-->
    <div>
        <form th:id="itemDetails" action="" method="post">
            <h2>Item Details</h2>
            <table>
                <tr>
                    <td>Item ID: </td>
                    <td th:text="${session.selectItem.itemId}"></td>
                </tr>
                <tr>
                    <td>Product ID: </td>
                    <td>
                        <input id="produ1" th:value="${session.selectItem.productId}" disabled="disabled"/>
                        <input id="productIdSelect" list="productId" name="productIdSelect" style="display: none"/>
                        <datalist id="productId" >
                            <option th:each="productId:${session.allProductId}" th:selected="${productId==session.selectItem.productId?'selected':''}" th:text="${productId}" th:value="${productId}"></option>
                        </datalist>
                    </td>
                </tr>
                <tr>
                    <td>ListPrice: </td>
                    <td>
                        <input name="listprice" th:value="${'$'+#numbers.formatDecimal(session.selectItem.listPrice,0,'COMMA',2,'POINT')}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>UnitCost: </td>
                    <td>
                        <input name="unitcost" th:value="${'$'+#numbers.formatDecimal(session.selectItem.unitCost,0,'COMMA',2,'POINT')}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>SupplierId: </td>
                    <td>
                        <input name="supplier" th:value="${session.selectItem.supplierId}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>Status: </td>
                    <td th:text="${session.selectItem.status}"></td>
                </tr>
                <tr>
                    <td>Attribute1: </td>
                    <td>
                        <input name="attr1" th:value="${session.selectItem.attribute1}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>Attribute2: </td>
                    <td>
                        <input name="attr2" th:value="${session.selectItem.attribute2}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>Attribute3: </td>
                    <td>
                        <input name="attr3" th:value="${session.selectItem.attribute3}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>Attribute4: </td>
                    <td>
                        <input name="attr4" th:value="${session.selectItem.attribute4}" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>Attribute5: </td>
                    <td>
                        <input name="attr5" th:value="${session.selectItem.attribute5}" disabled="disabled"/>
                    </td>
                </tr>
            </table>
        </form>
        <input id="edit" type="button"  style="display:inline-block;" th:onclick="revise()"/>
        <input id="save" type="button"  style="display:none;" th:onclick="save()" />
        <input  id="return" type="button" th:onclick="returnItemList('[[${session.selectItem.productId}]]')" />
    </div>
    <script>
        $(function (){
            //对搜索输入框的键盘按下后的事件进行监听keyup
            $('#searchText').on("keyup",function (){
                let datas={"word":$('#searchText').val()};
                $.post('/catalog/completeSearch',datas,function (data){

                });
                $.ajax({
                    //连接数据库进行查询
                    type:"GET",
                    url:"/catalog/completeSearch",
                    data:{"keyword":$('#searchText').val()},
                    dataType:"json",
                    success:function (data){
                        console.log("888888888888");
                        //创建数组用于存放获取的产品的名字
                        var searchResult=new Array();
                        for(var i=0;i<data.length;i++){
                            searchResult[i]=data[i].name;
                        }
                        //console.log(searchResult);
                        //将产品名显示在UI控件中
                        $('#searchText').autocomplete({
                            source:searchResult
                        });
                    }
                });
            });
            $('#searchSubmit').on('click',function (e) {
                e.preventDefault();
                console.log("点击搜索按钮");
                let datas = $('#keyForm').serialize();
                $.post('/catalog/searchProduct',datas,function (data){
                    if(data.code === 11)
                    {
                        console.log("搜索成功");
                        location.href = data.msg;
                    }

                });
            });
        });
        function undisabled(){
            var form = document.getElementById("itemDetails");
            var input = form.getElementsByTagName("input");
            for(var i = 0 ;i <input.length;i++){
                input[i].disabled = false;
            }
        }
        function indisabled(){
            var form = document.getElementById("itemDetails");
            var input = form.getElementsByTagName("input");
            for(var i = 0 ;i <input.length;i++){
                input[i].disabled = true;
            }
        }
        function revise(){
            document.getElementById("produ1").style.display = "none";
            document.getElementById("productIdSelect").style.display="block";
            undisabled();
            document.getElementById("edit").style.display = "none";
            document.getElementById("save").style.display = "inline-block";
        }
        function save(){
            let datas = $('#itemDetails').serialize();
            $.post('/manage/updateItem',datas,function (data) {
                if(data.code===1){
                    console.log("修改成功")
                    location.href=data.msg;
                    // indisabled();
                    // document.getElementById("produ1").style.display = "block";
                    // document.getElementById("productIdSelect").style.display="none";
                    // document.getElementById("productIdSelect").innerText="";
                    // document.getElementById("edit").style.display = "block";
                    // document.getElementById("save").style.display = "none";
                }
            });
        }
        function returnItemList(productId){
            var str=productId.split('"');
            location.href = "/manage/intoItemPage?productid="+str[1];
        }
    </script>
</div>
<div th:replace="manageCommon/managebottom"></div>
</body>
</html>